<template>
	<view class="container">
		<!-- 上传视频区块 -->
		<view class="upload-section">
			<view class="section-title">上传视频</view>
			<view class="video-container">
				<view class="upload-area" @click="chooseVideo">
					<video v-if="videoPath" :src="videoPath" class="video-preview"></video>
					<view v-else class="upload-placeholder">
						<uni-icons type="cloud-upload" size="96" color="#D81E43"></uni-icons>
						<text class="upload-text">上传视频</text>
						<!-- <text class="upload-tips">支持mp4/mov格式，不超过50MB</text> -->
					</view>
				</view>
			</view>
		</view>

		<!-- 选择商品区块 -->
		<view class="goods-section">
			<view class="section-title">选择商品（可选多个）</view>
			<view class="goods-list">
				<view class="sections" @tap="choose_goods">
					<view class="good-area">
						<uni-icons type="plusempty" size="40" color="#D81E43"></uni-icons>
					</view>
				</view>
				<view v-for="(item, index) in seele.page_video_goods_choose" :key="index" class="goods-item"
					:class="{ selected: selectedGoods.includes(item.id) }" @click="toggleGoods(item.id)">
					<image :src="$wanlshop.oss(product.image,0,0)" class="goods-thumb"></image>
					<view class="goods-info">
						<text class="goods-title">{{ item.title }}</text>
						<text class="goods-price">¥{{ item.price }}</text>
					</view>
					<view  class="selected-icon">
						<uni-icons type="checkmarkempty" color="#fff" size="20"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<!-- 发布按钮 -->
		<view class="footer">
			<button class="publish-btn" :disabled="!canPublish" @click="handlePublish">
				发布视频
			</button>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				videoPath: '', // 视频路径
				selectedGoods: [], // 选中的商品ID
				// 模拟商品数据
				goodsList: [{
						id: 1,
						thumb: '/static/m01.jpg',
						title: '夏季新款T恤',
						price: 99.9
					},
					{
						id: 2,
						thumb: '/static/m01.jpg',
						title: '休闲运动裤',
						price: 159.0
					}
				]
			}
		},
		computed: {
			...mapState(['seele']),
			canPublish() {
				return this.videoPath && this.selectedGoods.length > 0
			}
		},
		methods: {
			choose_goods(){
				uni.navigateTo({
					url:"/pages/dispatch/shop/selectGoodsPage"
				})
			},
			// 选择视频
			chooseVideo() {
				uni.chooseVideo({
					sourceType: ['album', 'camera'],
					compressed: false,
					maxDuration: 60,
					success: (res) => {
						this.videoPath = res.tempFilePath
						// 实际需要上传到服务器
					}
				})
			},

			// 切换商品选择
			toggleGoods(goodsId) {
				const index = this.selectedGoods.indexOf(goodsId)
				if (index === -1) {
					this.selectedGoods.push(goodsId)
				} else {
					this.selectedGoods.splice(index, 1)
				}
			},

			// 处理发布
			handlePublish() {
				if (!this.canPublish) return

				uni.showLoading({
					title: '发布中...'
				})

				// 模拟API请求
				setTimeout(() => {
					uni.hideLoading()
					uni.showToast({
						title: '发布成功',
						icon: 'success',
						success: () => {
							uni.navigateBack()
						}
					})
				}, 1500)
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 20rpx 30rpx;
		background-color: #F5F5FA;
	}

	.section-title {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 20rpx;
		font-weight: bold;
	}

	.video-container {
		width: 700rpx;
		height: 408rpx;
		background-color: #fff;
		border-radius: 15rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 上传区域 */
	.upload-area {
		height: 314rpx;
		width: 314rpx;
		background: #FFFFFF;
		border: 2rpx dashed #D81E43;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.video-preview {
		width: 100%;
		height: 100%;
	}

	.upload-placeholder {
		text-align: center;
	}

	.upload-text {
		display: block;
		color: #666;
		margin-top: 20rpx;
	}

	.upload-tips {
		font-size: 24rpx;
		color: #999;
	}

	/* 商品列表 */
	.sections {
		background-color: #FFFFFF;
		width: 284rpx;
		height: 257rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.good-area{
		width: 188rpx;
		height: 188rpx;
		border:  2rpx dashed #D81E43;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.goods-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
	}

	.goods-item {
		position: relative;
		background: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		border: 2rpx solid #eee;
		width: 284rpx;
		height: 257rpx;
	}

	.goods-item.selected {
		border-color: #007AFF;
	}

	.goods-thumb {
		width: 100%;
		height: 130rpx;
		background: #f0f0f0;
	}

	.goods-info {
		padding: 20rpx;
	}

	.goods-title {
		font-size: 28rpx;
		color: #333;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.goods-price {
		color: #DD524D;
		font-size: 32rpx;
		margin-top: 10rpx;
		display: block;
	}

	.selected-icon {
		position: absolute;
		right: 0;
		top: 0;
		background: #007AFF;
		width: 40rpx;
		height: 40rpx;
		border-radius: 0 0 0 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 发布按钮 */
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 30rpx;
		background: #fff;
		box-shadow: 0 -2rpx 6rpx rgba(0, 0, 0, 0.05);
	}

	.publish-btn {
		background: #BC4C42;
		color: #fff;
		border-radius: 15rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
	}

	.publish-btn[disabled] {
		background: #ccc;
	}
</style>